<template>
  <common-dialog :dialogVisible="dialogVisible" width="60%" :title="'前置任务'" @cancel="cancel" @ok="ok">
    <div class="btn-box">
      <a-button type="primary" style="margin-right: 8px;" @click="add">添加</a-button>
      <a-button @click="remove">移除</a-button>
    </div>
    <dragger-table
      :isCheck='false'
      :columns="columns"
      :tableData="tableData"
      @change='selChangeHandler'
      @blur="onBlur">
    </dragger-table>
  </common-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import commonDialog from '@/components/common/commonDialog'
import draggerTable from '@/components/common/draggerTable'
export default {
  components: { commonDialog, draggerTable },
  computed: {
    ...mapGetters({
      isAddNode: 'isAddNode',
      getAllTable: 'getAllTable'
    })
  },
  data() {
    return {
      dialogVisible: false,
      loadVisible: false, // 表格加载
      tabsKey: '1',
      tableData: [],
      currentRow: null,    //选中行
      columns: [
        {
          displayName: '行号',
          name: 'row',
          key: 'row',
          fieldType: 'Input'
        },
        {
          displayName: '名称',
          name: 'name',
          key: 'name',
          width: '300',
          fieldType: 'Select',
          required: true,
        },
        {
          displayName: '类型',
          name: 'type',
          key: 'type',
          fieldType: 'Select',
          width: '120',
          required: true,
          selectData: [
            { name: 'SS', value: '开始-开始' },
            { name: 'SF', value: '开始-结束' },
            { name: 'FF', value: '结束-结束' },
            { name: 'FS', value: '结束-开始' }
          ]
        },
        {
          displayName: '延期',
          name: 'delay',
          key: 'delay',
          fieldType: 'Input',
          number: true,
          step: 1
        }
      ]
    }
  },
  methods: {
    show(menuRecord) {
      this.tableData = []
      this.currentRow = menuRecord
      //筛选出非本节点和非父节点的所有节点(非新增节点)，并给名称设置模糊搜索项
      const list = this.getAllTable().filter(item => !this.currentRow.parentIds.includes(item.id) && 
        item.id != this.currentRow.id && !this.isAddNode(item.id) && item.plannableStatus == "SCHEDULED")
      let selData = []
      list.forEach(item => {
        selData.push({
          name: item.id,
          value: item.name
        })
      })
      this.columns.find(item => item.key == 'name').selectData = selData
      if (this.currentRow.predecessor.dependencyId != undefined) {
        this.tableData.push({
          delay: this.currentRow.predecessor.lag,
          name: this.currentRow.predecessor.predecessor,
          row: this.getAllTable().findIndex(item => item.id == this.currentRow.predecessor.predecessor),
          type: this.currentRow.predecessor.Type
        })
      }
      this.dialogVisible = true
    },
    add() {
      if (this.tableData.length > 0) {
        this.$message.error('只能设置一个前置任务.')
        return
      }
      let newData = {}
      this.columns.forEach(item => {
        newData[item.key] = ''
      })
      this.tableData.push(newData)
    },
    remove() {
      this.tableData = []
    },
    onBlur(column, rowData, rowIndex){
      if ( rowData.row.length > 0 ) {
        //在所有数据里找到目标任务，且目标任务不能是当前任务的父节点，也不能是当前任务，只能是未发布的任务
        const targetRow = this.getAllTable().find((item,index) => 
          index == rowData.row && !this.currentRow.parentIds.includes(item.id) &&
          item.id != this.currentRow.id && !this.isAddNode(item.id) &&
          item.plannableStatus == "SCHEDULED")
        if (targetRow != undefined) {
          this.$set(this.tableData[0], 'name', targetRow.id)
        }else {
          this.$message.error('不能选择当前任务的父任务,当前任务,新增任务和非未发布任务作为前置节点.')
          this.$set(this.tableData[0], 'row', '')
          this.$set(this.tableData[0], 'name', '')
        }
      }else {
        this.$set(this.tableData[0], 'name', '')
      }
    },
    //下拉选择的返回
    selChangeHandler(val,colKey) {
      if (colKey == 'name') {
        if (val != undefined) {
          this.$set(this.tableData[0], 'row', this.getAllTable().findIndex(item => item.id == val))
        }else {
          this.$set(this.tableData[0], 'row', '')
          this.$set(this.tableData[0], 'name', '')
        }
      }
    },
    cancel() {
      this.dialogVisible = false
      this.tableData = []
    },
    // 确认按钮
    ok() {
      // 操作
      const result = this.tableData[0]
      if (result == undefined) {
        this.$message.error('请添加前置任务后提交')
        return
      }
      if (result.name == '' || result.name == undefined || result.type == '' || result.type == undefined) {
        this.$message.error('请选择名称和类型')
        return
      }else {
        this.$emit('frontTask',result)
        this.cancel()
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .btn-box{
    padding-bottom: 10px;
  }
</style>